<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=750, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>2107班 ❤️ 鄢焕老师</title>
<style>
@font-face {
	font-family: Genshin;
	src: url(css/zh-cn.ttf);
}
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:750px; margin:0 auto;}
body{ font-family:Genshin,"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:2em; line-height:1.6; color:#ffffff;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}
html , body{ width:100%; height:100%; position:relative; overflow:hidden;}
 
/***************************/
.page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
.page{ width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;
	 display:flex; flex-direction: column; justify-content:center; align-items:center;
	 text-align:center;
}
.page.hide{ display:none;}
 
.page.inTop{
	-webkit-animation:ShowTop .5s ease-out both;
					animation:ShowTop .5s ease-out both;
}
.page.outTop{
	-webkit-animation:HideTop .5s ease-out both;
					animation:HideTop .5s ease-out both;
}
.page.inDown{
	-webkit-animation:ShowDown .5s ease-out both;
					animation:ShowDown .5s ease-out both;
}
.page.outDown{
	-webkit-animation:HideDown .5s ease-out both;
					animation:HideDown .5s ease-out both;
}
@-webkit-keyframes ShowTop{
	0%{ -webkit-transform:translateY(100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowTop{
	0%{ transform:translateY(100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideTop{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(-100%);}
}
@keyframes HideTop{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(-100%);}
}
@-webkit-keyframes ShowDown{
	0%{ -webkit-transform:translateY(-100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowDown{
	0%{ transform:translateY(-100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideDown{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(100%);}
}
@keyframes HideDown{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(100%);}
}
 
.arrow{ width:60px; height:52px; color: #fff; font-size: 36px; position:absolute; left:50%; margin-left: -30px; bottom:0;
	-webkit-animation:fadeIn .5s 1s ease-in-out both;
					animation:fadeIn .5s 1s ease-in-out both;
}
.arrow.hide{ display:none;}
.arrow div:first-child , .arrow div:last-child{ display: flex; justify-content: center; align-items: center; width:60px; height: 40px; position:absolute; left:0;
	-webkit-transform-origin:center top;
					transform-origin:center top;
}
.arrow div:first-child{ top:0;
	-webkit-animation:arrow .8s .5s ease-in-out infinite alternate;
					animation:arrow .8s .5s ease-in-out infinite alternate;
}
.arrow div:last-child{ top:12px;
	-webkit-animation:arrow .8s .8s ease-in-out infinite alternate;
					animation:arrow .8s .8s ease-in-out infinite alternate;
}
@-webkit-keyframes arrow{
	100%{ -webkit-transform:translateY(-50%); opacity:1;}
	0%{ -webkit-transform:translateY(0); opacity:0;}
}
@keyframes arrow{
	100%{ transform:translateY(-50%); opacity:1;}
	0%{ transform:translateY(0); opacity:0;}
}
/***************************/
 
@-webkit-keyframes fadeInMinToMax{
	0%{ -webkit-transform:scale(0); opacity:0;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMinToMax{
	0%{ transform:scale(0); opacity:0;}
	100%{ transform:scale(1); opacity:1;}
}
.page{ font-size: 1.2em; background: url(static/98322266_p0.jpg) no-repeat;background-size: cover; }
.page1_title{ 
	width: 100%;
    height: 150px;
    line-height: 150px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.4em;
	color:white;
	-webkit-animation:fadeInMinToMax .8s .4s ease-out both;
	animation:fadeInMinToMax .8s .4s ease-out both;
}
a {
    color: white;
    text-decoration: unset;
    background: #00000033;
    padding: 20px;
    border-radius: .6em;
}
.page1 .scroll_box{ width:80%; height:60vh; margin: 0 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
	-webkit-animation:fadeInMinToMax 1.5s .4s ease-out both;
					animation:fadeInMinToMax 1.5s .4s ease-out both;
}
.page2 .scroll_box{ width: 100%; height: 100%; text-align: center; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.page2 .scroll_box > div{ padding: 50px 0 80px 0;}
.page2_body div:nth-child(1) , .page3_body div:nth-child(1){
	-webkit-animation:fadeInMinToMax .8s .4s ease-out both;
					animation:fadeInMinToMax .8s .4s ease-out both;
}
.page2_body div:nth-child(2) , .page3_body div:nth-child(2){
	-webkit-animation:fadeInMinToMax .8s .5s ease-out both;
					animation:fadeInMinToMax .8s .5s ease-out both;
}
.page2_body div:nth-child(3) , .page3_body div:nth-child(3){
	-webkit-animation:fadeInMinToMax .8s .6s ease-out both;
					animation:fadeInMinToMax .8s .6s ease-out both;
}
.page2_body div:nth-child(4) , .page3_body div:nth-child(4){
	-webkit-animation:fadeInMinToMax .8s .7s ease-out both;
					animation:fadeInMinToMax .8s .7s ease-out both;
}
.page2_body div:nth-child(5) , .page3_body div:nth-child(5){
	-webkit-animation:fadeInMinToMax .8s .8s ease-out both;
					animation:fadeInMinToMax .8s .8s ease-out both;
}
.page2_body div:nth-child(6) , .page3_body div:nth-child(6){
	-webkit-animation:fadeInMinToMax .8s .9s ease-out both;
					animation:fadeInMinToMax .8s .9s ease-out both;
}
.page2_body div:nth-child(7) , .page3_body div:nth-child(7){
	-webkit-animation:fadeInMinToMax .8s 1s ease-out both;
					animation:fadeInMinToMax .8s 1s ease-out both;
}
.page2_body div:nth-child(8) , .page3_body div:nth-child(8){
	-webkit-animation:fadeInMinToMax .8s 1.1s ease-out both;
					animation:fadeInMinToMax .8s 1.1s ease-out both;
}
.page2_body div:nth-child(9) , .page3_body div:nth-child(9){
	-webkit-animation:fadeInMinToMax .8s 1.2s ease-out both;
					animation:fadeInMinToMax .8s 1.2s ease-out both;
}
.page2_body div:nth-child(10) , .page3_body div:nth-child(10){
	-webkit-animation:fadeInMinToMax .8s 1.3s ease-out both;
					animation:fadeInMinToMax .8s 1.3s ease-out both;
}
.page * {
	color: #f7f1f6;
	text-shadow: 2px 2px 9px #000;
}
.page3_body * {
	color: white;
}
</style>
</head>
 
<body>
<dialog style="
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: none;
border-radius: 20px;
z-index: 9999999;
width: 80%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
" open>
<button style="color: lightskyblue; border: none; border-radius: 5px;font-size:1.4em;" onclick="music.play(),(this.parentElement.style.display='none')">点击允许播放声音</button>
</dialog>
<div class="page_box">
	<div class="page page1">
		<div class="page1_body">
			<div class="page1_title">2107班 ❤️ 鄢焕老师</div>
			<!-- <div class="page1_body" style="text-align: center; animation:fadeInMinToMax .8s .6s ease-out both; color:white;">
				2022.06.24 分班纪念
			</div> -->
		</div>
	</div>
	
	<div class="page page2 hide">
		<div class="page2_body">
			<div id="t1">感谢</div>
			<div id="t2">予我们惊喜，也予我们万千风景</div>
			<div style="font-size:0.7em;color:#f7f1f6ee;">向上滑动 是七班同学们对您的心意</div>
		</div>
	</div>
	
	<div class="page page3 hide">
		<div class="page3_body">
			<a href="#" onclick="goLottery()">查看留言</a>
			<!-- <br /><br />
			<a href="#">查看给我的留言</a> -->
		</div>
	</div>
	
	<div class="arrow">
		<div>
			<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859"><path d="M491.42 412.298c7.887 12.378 6.427 28.995-4.381 39.803L204.196 734.944l-90.51-90.51c-12.496-12.497-12.496-32.758 0-45.255L396.53 316.337l0.265 0.265 89.974-89.975c12.497-12.496 32.758-12.496 45.255 0l395.98 395.98-90.51 90.51c-12.497 12.497-32.758 12.497-45.255 0L491.42 412.297z" p-id="2860"></path></svg>
		</div>
		<div>
			<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859"><path d="M491.42 412.298c7.887 12.378 6.427 28.995-4.381 39.803L204.196 734.944l-90.51-90.51c-12.496-12.497-12.496-32.758 0-45.255L396.53 316.337l0.265 0.265 89.974-89.975c12.497-12.496 32.758-12.496 45.255 0l395.98 395.98-90.51 90.51c-12.497 12.497-32.758 12.497-45.255 0L491.42 412.297z" p-id="2860"></path></svg>
		</div>
	</div>
</div>
 
<script type="text/javascript">
var music = new Audio("static/yynexz.mp3");
		music.loop=true;
		if(localStorage.musicTime) music.currentTime = (parseFloat(localStorage.musicTime));
		setInterval(()=>{music.play(); localStorage.musicTime=music.currentTime;}, 1000);
function goLottery() {
	location.href="lottery.html";
}
// element 作用区域（所有执行翻页页面的父级元素DOM）
// isLoop 是否循环执行翻页
// needScrollClass 执行翻页页面内部可滚动元素样式名
function setChangePage(element,isLoop,needScrollClass){
	// console.log(element.querySelectorAll('.page'));
	// console.log(element.querySelectorAll('.page').length);
	// console.log(element.querySelector('.page'));
	// console.log(element.querySelector('.page2'));
	var pageData = {
		curPage:1,
		prevPage:null,
		PageL:element.querySelectorAll('.page').length,
		type:null,
		canTouch:true,
		startY:0,
		endY:0,
		diff:0,
	}
	var startEvt,moveEvt,endEvt;
	if("ontouchstart" in window){
		// 移动端用户滑动事件
		startEvt = "touchstart";
		moveEvt = "touchmove";
		endEvt = "touchend";
	}else{
		// PC端鼠标移动事件
		startEvt = "mousedown";
		moveEvt = "mousemove";
		endEvt = "mouseup";
	}
	element.addEventListener(startEvt, touchStart, false);
	element.addEventListener(moveEvt, touchMove, false);
	element.addEventListener(endEvt, touchEnd, false);
	function touchStart(e){
		pageData.startY = startEvt == "touchstart" ? e.touches[0].pageY : e.pageY;
		pageData.endY = '';
		pageData.diff = '';
	}  
	function touchMove(e){
		e.preventDefault();
		pageData.endY = startEvt == "touchstart" ? e.touches[0].pageY : e.pageY;
		pageData.diff = pageData.endY - pageData.startY;
	}
	function touchEnd(e){
		if(Math.abs(pageData.diff) > 150 && pageData.canTouch){
			changeDoBefore(pageData.diff);
		}
		// setTimeout(function(){
			pageData.startY = '';
			pageData.endY = '';
			pageData.diff = '';
		// },500);
	}
	function changeDoBefore(diffNum){
		if(diffNum > 0){
			// 向下滑动进入前一页
			pageData.type = 2;
			if(pageData.curPage <= 1){
				if(isLoop){
					pageData.prevPage = 1;
					pageData.curPage = pageData.PageL;
					changeDo();
				}
			}else{
				pageData.prevPage = pageData.curPage;
				pageData.curPage--;
				changeDo();
			}
		}else{
			// 向上滑动进入下一页
			pageData.type = 1;
			if(pageData.curPage >= pageData.PageL){
				if(isLoop){
					pageData.prevPage = pageData.PageL;
					pageData.curPage = 1;
					changeDo();
				}
			}else{
				pageData.prevPage = pageData.curPage;
				pageData.curPage++;
				changeDo();
			}
		}
	}
	function changeDo(){
		if(pageData.type == 1){
			element.querySelector('.page' + pageData.prevPage).classList.remove('inTop' , 'outTop' , 'inDown' , 'outDown' , 'hide');
			element.querySelector('.page' + pageData.prevPage).classList.add('outTop');
			element.querySelector('.page' + pageData.curPage).classList.remove('inTop' , 'outTop' , 'inDown' , 'outDown' , 'hide');
			element.querySelector('.page' + pageData.curPage).classList.add('inTop');
		}else if(pageData.type == 2){
			element.querySelector('.page' + pageData.prevPage).classList.remove('inTop' , 'outTop' , 'inDown' , 'outDown' , 'hide');
			element.querySelector('.page' + pageData.prevPage).classList.add('outDown');
			element.querySelector('.page' + pageData.curPage).classList.remove('inTop' , 'outTop' , 'inDown' , 'outDown' , 'hide');
			element.querySelector('.page' + pageData.curPage).classList.add('inDown');
		}
 
		if(needScrollClass && startEvt == "touchstart"){
			scrollEleData.canTouch = false;
			setTimeout(function(){
				scrollEleData.canTouch = true;
			},500);
		}
 
		pageData.canTouch = false;
		setTimeout(function(){
			pageData.canTouch = true;
			element.querySelector('.page' + pageData.prevPage).classList.add('hide');
		},500);
		// 不循环切换时设置最后一页时隐藏向上箭头
		if(pageData.curPage >= pageData.PageL){
			if(!isLoop){
				element.querySelector('.arrow').classList.add('hide');
			}
		}else{
			if(!isLoop){
				element.querySelector('.arrow').classList.remove('hide');
			}
		}
		// 执行翻页页面内部可滚动时，设置进入页面后滚动条位置
		if(needScrollClass && element.querySelector('.page' + pageData.curPage).querySelector('.' + needScrollClass)){
			element.querySelector('.page' + pageData.curPage).querySelector('.' + needScrollClass).scrollTop = 0;
		}
	}
	// 执行翻页页面内部可滚动（移动端需要）
	if(needScrollClass && startEvt == "touchstart"){
		var scrollEleData = {
			canTouch:true,
			startY:0,
			endY:0,
			diff:0,
		}
		// console.log(element.querySelectorAll('.' + needScrollClass).length);
		element.querySelectorAll('.' + needScrollClass).forEach(function(item,index){
			// console.log(item,index);
			item.addEventListener("touchstart", scrollEleTouchStart, false);
			item.addEventListener("touchmove", scrollEleTouchMove, false);
			item.addEventListener("touchend", scrollEleTouchEnd, false);
			function scrollEleTouchStart(e){
				// e.stopPropagation();
				element.removeEventListener("touchmove", touchMove, false);
				scrollEleData.startY = e.touches[0].pageY;
				scrollEleData.endY = '';
				scrollEleData.diff = '';
			}  
			function scrollEleTouchMove(e){
				scrollEleData.endY = e.touches[0].pageY;
				scrollEleData.diff = scrollEleData.endY - scrollEleData.startY;
			}
			function scrollEleTouchEnd(e){
				element.addEventListener("touchmove", touchMove, false);
				// console.log(scrollEleData.canTouch);
				if(Math.abs(scrollEleData.diff) > 150 && scrollEleData.canTouch){
					changeDoBefore(scrollEleData.diff);
				}
				// setTimeout(function(){
					scrollEleData.startY = '';
					scrollEleData.endY = '';
					scrollEleData.diff = '';
				// },500);
			}
			item.addEventListener("scroll", scrollDo, false);
			function scrollDo(e){
				// console.log(e.target.clientHeight , e.target.scrollTop , e.target.scrollHeight);
				if((e.target.clientHeight + e.target.scrollTop + 2 >= e.target.scrollHeight) || (e.target.scrollTop == 0)){
					setTimeout(function(){
						scrollEleData.canTouch = true;
					},500);
				}else{
					scrollEleData.canTouch = false;
				}
			}
		})
	}
}
 
/***************************/
 
// 例：
// 循环执行翻页
// setChangePage(document.getElementsByClassName('page_box')[0],'loop','scroll_box');
// 不循环执行翻页
setChangePage(document.getElementsByClassName('page_box')[0],'','scroll_box');
</script>
</body>
</html>